<template>
  <view class="container">
    <view class="tui-padding">
      <view class="tui-title tui-top40">图片上传（请点击加号上传）</view>

      <view class="tui-upload-box">
        <view :key="index" class="tui-upload-item" v-for="(item,index) in files">
          <image :id="item" :src="item" @tap="previewImage" class='tui-upload-img' mode="aspectFill"></image>
          <tui-icon :index="index" :size="24" @click="deleteImage" class="tui-upload-del" color="#ed3f14"
                    name="close-fill"></tui-icon>
        </view>
        <view :hover-stay-time="150" @tap="chooseImage" class="tui-upload-item tui-upload-add"
              hover-class="tui-opcity" v-if="files.length < 9">
          <text>+</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import tuiIcon from "@/components/icon/icon"

  export default {
    name: "others",
    components: {
      tuiIcon
    },
    data() {
      return {
        files: [] //最多上传9张图片
      }
    },
    methods: {
      chooseImage: function (e) {
        let that = this;
        if (that.files.length >= 9) {
          this.tui.toast("最多上传9张图片");
          return
        }
        wx.chooseImage({
          count: 9 - that.files.length,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            that.files = that.files.concat(res.tempFilePaths)
            //上传功能已去除
            //...
          }
        })
      },
      previewImage: function (e) {
        uni.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: this.files // 需要预览的图片http链接列表
        })
      },
      deleteImage: function (e) {
        const index = e.index;
        this.files.splice(index, 1);
      }
    }

  }
</script>

<style lang="css" scoped>
  @import "others.css";
</style>
